<template>
    <div class="geren">
        <div class="title">
            <h1>个人主页</h1>
        </div>
        <div class="main">
            <div class="tou">
                <el-upload class="avatar-uploader" action="http://shop.bluej.cn/api/update" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p>用户名：{{username}}</p>'
                <!-- <button @click="touxiang">修改头像/上传</button> -->
                <!-- <input type="file"> -->
            </div>
            <div class="xiugai">
                <h3>修改密码/用户名</h3>
                <div class="xiugaixinxi" element-loading-text="拼命加载中">
                    手机号：<el-input class="aa" placeholder="请输入手机号" v-model="userInfo.phone"></el-input>
                    原密码：<el-input class="aa" placeholder="请输入原密码" v-model="userInfo.password" show-password></el-input>
                    新密码：<el-input class="aa" placeholder="请输入新密码" v-model="userInfo.newpassword" show-password>
                    </el-input>
                    新用户名：<el-input class="aa" placeholder="请输入新用户名" v-model="userInfo.newname"></el-input>
                </div>
                <button @click="xiugaixinxi">确认</button>
            </div>

        </div>

    </div>
</template>

<script>
//引入上传头像的请求函数,提交个人信息的请求函数
import { upDate, upuser } from "@/assets/request.js"

export default {
    name: "gerenzhuye",
    data() {
        return {

            userInfo: {
                phone: 13317690512,
                password: "",
                newpassword: "",
                newname: "",
            },
            imageUrl: '',
            username:'',
            // touxiang,

        }
    },

    //方法
    methods: {

        //修改用户信息
        async xiugaixinxi() {

            //把保存在本地的用户id拿出来，用一个变量接一下
            let bb = sessionStorage.getItem("id")

            //调用提交用户修改信息的请求函数，把用户id和修改的值传输过去
           let dd = await upuser(
                bb,
                {
                    name:this.userInfo.newname,
                    password:this.userInfo.newpassword,
                    phone:this.userInfo.phone,
                    header_img:this.imageUrl,

                },
            )
            console.log(dd);

        },

        //组件上传图片成功后的行为
        handleAvatarSuccess(res,file) {

            console.log(file);
            // this.imageUrl = URL.createObjectURL(file.raw);
            // console.log(this.imageUrl);

            //把file里的图片路径赋值给data里的参数
            this.imageUrl= file.response.result.path

            // console.log(this.imageUrl);
        },

        //组件上传图片前的一些判断
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },

    //钩子
    mounted(){
       //把本地存储的用户名拿出来赋值给页面data，渲染到页面上
        this.username = sessionStorage.getItem("username")
        this.imageUrl = sessionStorage.getItem("touxiang")

    }

}

</script>

<style lang='scss' scoped>
.geren {
    background-color: gainsboro;
    // margin-left: 58px;

    .title {
        width: 1400px;
        background-color: gainsboro;
        text-align: center;
        padding-top: 10px;
        margin: 0 auto;
        
    }

    .main {
        width: 600px;
        height: 500px;
        background-color: gainsboro;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid white;
        margin: 0 auto;

        .tou {
            width: 150px;
            height: 150px;
            // border: 1px solid black;
            border-radius: 50%;
            margin-top: -150px;


            img {
                width: 100%;
                height: 100%;
            }

            p {
                width: 150px;
                // background-color: pink;
                font-size: 16px;
                text-align: center;
                margin-top: 10px;
                margin-left: 15px;
            }


        }

        .xiugai {
            width: 350px;
            height: 400px;
            // border: 1px solid black;
            padding-left: 10px;
            margin-left: 50px;

            .xiugaixinxi {
                padding-top: 10px;
                font-size: 16px;


            }

            .aa {
                margin-bottom: 10px;
            }

            button {
                width: 80px;
                height: 40px;
                margin-left: 140px;
                font-size: 16px;
                background-color: #333333;
                border: none;
                border-radius: 0px;
                cursor: pointer;
                color: white;

                &:hover {
                    background-color: orangered;
                    transition: all 0.5s;

                }
            }
        }
    }
}
</style>

<style>
.avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    background-color: white;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
